<template>
  <div> 
    <a-upload-dragger
      name="fileupload[]"
      :multiple="true"
      :action="FileUpload.url"
      :headers="FileUpload.headers"
      @change="handleChange"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text">点击或者拖拽上传</p>
      <p class="ant-upload-hint">
        支持单次或批量上传。图片
      </p>
    </a-upload-dragger> 
    <a-divider orientation="left">
    图库列表
  </a-divider> 
<a-image-preview-group>
      <a-row    class="img-list" v-for="item in pictureList" :key="item.name" >
        <a-col :span="2"> <a-image style="max-width:50px"   :src="item.address" /> </a-col>
        <a-col  :span="10"> <div style="overflow:hidden;text-overflow:ellipsis"  v-text="item.name"></div> </a-col>
        <a-col   :span="4">     
          <a-button  @click="copyData(item.address)" >地址 </a-button> 
          </a-col>
        <a-col    :span="4">   <a-button  @click="copyData(`![#${item.name}](${item.address})`)" >格式 </a-button></a-col>
      </a-row> 
    </a-image-preview-group> 
     <a-button @click="copyData(getLists())" type="primary"> 获取全部图片格式 </a-button> <br><br>
    <br>
 <a-pagination   @change="onChange" v-model:current="pagination.current" :total="pagination.total" show-less-items />
  </div>
</template>
<script>
import { FileUploadUrl,FileUploadHeaders, FileList } from "@/adminCore/api/file";
import copyData from "@/utils/copyData";
import  components from 'ant-design-vue'

import {
  reactive, ref,
  //  ref
} from "vue"; 
export default {
  data() {
    return {};
  },
  methods: {
  
  },

  setup() { 
 
    const GetList = (p) => FileList(p);
    const pagination=reactive({ 
      current: 1,
      pageSize: 10,
      total: 100,
    })
    function onChange(){
      showList(pagination.current,pagination.pageSize)
    }
    const FileUpload={url:FileUploadUrl,headers:FileUploadHeaders}
    // const Upload=FileUploadUrl
    // console.log(Upload)
    // {name:"",url:""}
    let pictureList = ref([]);

    showList(1,10)//刷新
    function showList(currentPage, loadCount){
   
      GetList({ currentPage, loadCount }).then(({ data }) => {

        let temp = data.map((item) => {
          return {
            name: item.Name,
            address: item.Address,
          };
        });
 
        pictureList.value=temp
        // pictureList.push(...temp);
        //
      });
    }

    function handleChange(info) {
      const status = info.file.status;
      console.log(info.file.status);
      if (status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (status === "done") {
         showList(1,10)//刷新
       components.message.success(`${info.file.name} 上传成功`);
      } else if (status === "error") {
        components.message.error(`${info.file.name} 上传失败`);
      }
    }
    
    function getLists(){
       let data=pictureList.value.map((item)=>{ return `![#${item.name}](${item.address}#w40)` })
      return data.join("\n")
    }
    return { 
      FileUpload,
      copyData,
      GetList,
      pagination,
      onChange,
      handleChange,
      pictureList, 
      getLists, //批量生成图片格式
    };
  },
};
</script>

<style lang="scss" scoped>
.img-list{
  height: 36px; 
  margin-bottom: 5px; 
}
</style>